import { RightOutlined } from "@ant-design/icons";
import { Button, Card, Col, List, Row, Space, Tabs, Form, Input, Modal } from "antd";
import { useState } from "react";
const { TabPane } = Tabs;

const AccountCancellation = () => {
    const [isModalVisible, setModalVisible] = useState(false);
    const close = () => {
        setModalVisible(false);
    };
    const open = () => {
        setModalVisible(true);
    };
    return (
        <Card title="注销" style={{ minHeight: "100%" }}>
            <Button onClick={open}>注销账号</Button>
            <Modal
                width={400}
                style={{
                    top: "30%"
                }}
                title="注销账号"
                onCancel={close}
                visible={isModalVisible}
            >
                <div>您确定要注销账号吗？注销后您的所有数据丢失，存储的文件在一段时间后会删除。</div>
                <Space>
                    <span>我</span>
                    {<Input style={{width: "12em"}} placeholder="已了解注销账号的后果" />}
                    <span>，确定要注销账号</span>
                </Space>
            </Modal>
        </Card>
    )
}


export default AccountCancellation;
